<template>
  <div class="audition303">
    <h3><strong>内部实现：</strong></h3>
    <p><br></p>
    <p>总体来说</p>
    <p><br></p>
    <p>
      react-router-dom利用了Context API，通过上下文对象将当前路由信息对象注入到 Router 组件中，<br/>所以 Router 组件中 render() 渲染的内容就是 ContextAPI 提供的 Provider 组件，然后接收 Router 组件中的当前路由信息对象。<br/> 这样 Router 组件下的所有组件都能通过上下文拿到当前路由信息对象，<br/>即其中的Switch 、 Route 、 Link 、Redirect 等组件都可以拿到当前路由信息对象，<br/>然后通过改变当前路由信息来实现动态切换 Route 组件的渲染。
    </p>
    <p><br></p>
    <p>单独的讲</p>
    <p><br></p>
    <p><span class="color">RouterContext</span>：react-router使用context实现跨组件间数据传递，所以react-router定义了一个routerContext作为数据源</p>
    <p><span class="color1">Router</span>：BrowserRouter和HashRouter将当前路由注入到上下文中，同时路由信息包含location、match、history</p>
    <p><span class="color2">Route</span>：路由规则，获取RouterContext的信息(location对象)，获取path和component属性，<br/>判断path和当前的location是否匹配，如果匹配，则渲染component，否则返回null，不渲染任何内容</p>
    <p><span class="color3">Switch</span>：遍历所有子元素(Route)，判断Route的path和location是否匹配，如果匹配，则渲染，否则不渲染</p>
    <p><span class="color4">Redireact</span>：未能配则重定向到指定页面</p>
    <p><span class="color5">Link/NavLink</span>: Link组件本质就是a标签，它修改了a标签的默认行为，<br/>当点击Link时，会导航到对应的路由，导致locaiton对象的改变，出发组件的更新</p>
    <p><span class="color">withRouter</span>：对传入的组件进行加强，功能就是获取routerContext上面的信息，然后作为props传给需要加强的组件</p>
    <p><br></p>
    <h3><strong>怎么做路由守卫?</strong></h3>
    <p><br></p>
    <p>
      推荐阅读：<a href="https://www.jb51.net/article/218977.htm" target="_blank">react 路由守卫</a>
    </p>
  </div>
</template>

<script>
export default {
  name: 'Audition303'
}
</script>

<style>

</style>